<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">选择项目</h1>
		</header>
		<div class="mui-content">
		    
		    <div class="mui-slider">
		        <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		            <a class="mui-control-item" href="#item1">服务</a>
		            <a class="mui-control-item" href="#item2">商品</a>
		        </div>
		        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
		        <div class="mui-slider-group">
		            <div id="item1" class="mui-slider-item mui-control-content mui-active">
		            	<!--
                        	作者：592176224@qq.com
                        	时间：2019-01-23
                        	描述：
		                <ul class="mui-table-view">
		                    <li class="mui-table-view-cell" onclick="gopage('settingcom')">洗发水</li>
		                    <li class="mui-table-view-cell">助理</li>
		                    <li class="mui-table-view-cell">染烫师</li>
		                    <li class="mui-table-view-cell">家名</li>
		                </ul>
                        -->
		            </div>
		            <div id="item2" class="mui-slider-item mui-control-content">
		            	<!--
                        	作者：592176224@qq.com
                        	时间：2019-01-23
                        	描述：
		                <ul class="mui-table-view">
		                    <li class="mui-table-view-cell">洗发水</li>
		                    <li class="mui-table-view-cell">助理</li>
		                    <li class="mui-table-view-cell">染烫师</li>
		                    <li class="mui-table-view-cell">家名</li>
		                </ul>
                        -->
		            </div>
		        </div>
		    </div>
		    
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var rid = 0;
			window.onload = function(){
				mui.init();
				rid = getrequest().rid||0;
				console.log(rid);
				mui.plusReady(function(res){
					var view = plus.webview.currentWebview();
					rid = view.rid||0;
				})
				getproduct2();
				getproduct1();
			}
			function getproduct2(){
				var data = {
					url:"/api/product/list_sort",
					data:{
						access_token:acctoken(),
						role_id:rid,
						type:2
					}
				}
				ajax(data,function(res){
					console.log("服务",res)
					setproduct2(res.data);
				});
			}
			
			function setproduct2(list){
				var str = '<ul class="mui-table-view">'+
					'<li class="mui-table-view-cell" data-id="0" data-type="2"'+
					' onclick="gopage(this)">'+
					'<a class="mui-navigate-right">';
					if(list.default_percent == true){
						str += '<span class="mui-badge mui-badge-danger">已设置</span>';
					}else{
						str += '<span class="mui-badge">未设置</span>';
					}
					
					str += '所有服务</a></li>';
					for(var i = 0; i < list.data.length; i++){
						str += '<li class="mui-table-view-cell" data-type="2" data-id="'+list.data[i].id+'" '+
						' onclick="gopage(this)">'+
						'<a class="mui-navigate-right">';
						if(list.data[i].product_percent.length > 0){
							str += '<span class="mui-badge mui-badge-danger">已设置</span>';
						}else{
							str += '<span class="mui-badge">未设置</span>';
						}
						str += list.data[i].product_name+'</a></li>';
					}
					str += '</ul>';
					g("item1").innerHTML = str;
				
				
			}
			function getproduct1(){
				var data = {
					url:"/api/product/list_sort",
					data:{
						access_token:acctoken(),
						role_id:rid,
						type:1
					}
				}
				ajax(data,function(res){
					console.log("商品",res);
					setproduct1(res.data);
				});
			}
			
			function setproduct1(list){
				var str = '<ul class="mui-table-view">'+
					'<li class="mui-table-view-cell" data-id="0" data-type="1" onclick="gopage(this)">'+
					'<a class="mui-navigate-right">';
					if(list.default_percent){
						str += '<span class="mui-badge mui-badge-danger">已设置</span>';
					}else{
						str += '<span class="mui-badge">未设置</span>';
					}
					
					str += '所有商品</a></li>';
					for(var i = 0; i < list.data.length; i++){
						str += '<li class="mui-table-view-cell" data-type="1" data-id="'+list.data[i].id+'" '+
						' onclick="gopage(this)">'+
						'<a class="mui-navigate-right">';
						if(list.data[i].product_percent.length > 0){
							str += '<span class="mui-badge mui-badge-danger">已设置</span>';
						}else{
							str += '<span class="mui-badge">未设置</span>';
						}
						str += list.data[i].product_name+'</a></li>';
					}
					str += '</ul>';
					g("item2").innerHTML = str;
			}
			
			function gopage(e){
				var product_id = $(e).attr("data-id");
				var product_type = $(e).attr("data-type");
				var list = {product_id: product_id,product_type:product_type,rid:rid}
				mui.openWindow({
				    url: 'settingcom.html?product_id='+product_id+'&product_type='+product_type+'&rid='+rid, 
				    id: 'settingcom',
				    extras: list,
				 });
			}
			
		</script>
	</body>

</html>